import React ,{Component}from 'react';
import {Button} from 'antd'
import cart from './Cart.module.css'
import * as api from '../until/getProduct'
export default class Cart extends Component{
	state={
		cartList:[],
		selectedall:false,
		money:0.00
	}
	suan(){
		if(this.state.money==0){
			alert('请选择一个商品')
		}else{
			this.props.history.push({pathname:'/order',state:{totalpric:this.state.money}})
		}
	}
	// 计算总金额
	zong(){
			let arr=this.state.cartList;
			let qian=0;
			arr.map((item)=>{
				if(item.selected===true){
					qian+=item.product.price*item.quantity
					console.log(qian)
					localStorage.setItem('totalpric',qian)
				}
			})
			this.setState({
				money:qian
			})
		}
	// 点击复选框
	dan(i){
		let arr=this.state.cartList;
		arr[i].selected=!arr[i].selected;
		let arr1=arr.filter((item)=>item.selected===true);
		
		if(arr1.length===arr.length){
			this.setState({
				cartList:arr,
				selectedall:true
			})
		}else{
			this.setState({
				cartList:arr,
				selectedall:false
			})
		}
		this.zong()
	}
	// 点击全选按钮
	quan(){
		let flag=this.state.selectedall;
		let arr=this.state.cartList;
		flag=!flag;
		if(flag===true){
			arr.map((item)=>{
				item.selected=true
			})
		}else{
			arr.map((item)=>{
				item.selected=false
			})
		}
		this.setState({
			selectedall:flag,
			cartList:arr
		})
		this.zong()
	}
	num(i,e){
		let id=this.state.cartList[i].product._id;
		let arr=this.state.cartList;
		let num = arr[i].quantity
		let nums=parseInt(e.target.value);
		if(num<nums){
			api.addcart({
				product:id,quantity:1
			}).then(res=>{
				this.getCart()
			})
		}else{
			api.addcart({
				product:id,quantity:-1
			}).then(res=>{
				this.getCart()
			})
		}
		
	}
	// 删除
	del(i){
		let id=this.state.cartList[i]._id
		let arr=this.state.cartList;
		api.deletecart(id).then(res=>{
			console.log(res.data)
			arr.splice(i,1);
			this.setState({
				cartList:arr
			})
		})
	}
	getCart(){
		api.getcart({}).then(res=>{
			let arr=res.data
			arr.map((item)=>{
				item.selected=false //控制选中以及未选中
			})
			arr.map((items,i)=>{
				if(!items.product){
					arr.splice(i,1)
				}
			})
			this.setState({cartList:arr})
		})
	}
	componentWillMount(){
		this.getCart()
	}
	componentDidMount(){
		window.scrollTo(0,0)
		this.getCart()
	}
	// 获取订单信息
	onChange(){
		
	}
	render(){
		return(
			<div className={cart.Box}>
				<div className={cart.top}>
					<img src="https://img2.fiveplus.com/rs/common/v1/web/css/buy_step_1.png?v=20191119142609" alt=''/>
				</div>
				<h3 className={cart.h3}>购物袋</h3>
				<div className={cart.tip}>
				优惠：单笔消费，满699元免邮
				</div>
				<table className={cart.table}>
				<thead>
					<tr>
						<th></th>
						<th></th>
						<th>商品名称</th>
						<th>颜色/尺寸</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
				</thead>
				<tbody>
					{
						this.state.cartList.map((item,i)=>{
							return(
								<tr key={item._id}>
									<td><input type="checkbox" onChange={()=>this.onChange()} checked={item.selected} onClick={this.dan.bind(this,i)}/></td>
									<td><img src={item.product.coverImg} alt=""/></td>
									<td>{item.product.name}</td>
									<td>蓝/S</td>
									<td>¥{item.product.price}</td>
									<td>
									<input type="number" onChange={this.num.bind(this,i)} value={item.quantity} />
									<a href="setinnerhtml:;" onClick={this.del.bind(this,i)}>删除</a>
									</td>
									<td>{item.product.price*item.quantity}</td>
								</tr>
							)
						})
					}
					</tbody>
				</table>
				<div className={cart.quan}>
					全选: <input type="checkbox" onChange={()=>this.onChange()} checked={this.state.selectedall} onClick={this.quan.bind(this)}/> 
					<p className={cart.y}>总金额:¥<span className={cart.price}>{this.state.money}</span></p>
					<br/>
					<Button type="danger" className={cart.button} onClick={this.suan.bind(this)}> 立即结算</Button>
				</div>
			</div>
		)
	}
}